{% extends 'base.html' %}

{% block content %}
<style>
    .history-timeline {
        max-width: 800px;
        margin: 2rem auto;
        padding: 20px;
        position: relative;
    }
    .timeline-item {
        position: relative;
        padding: 20px 30px;
        margin-bottom: 30px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    .timeline-item:hover {
        transform: translateX(10px);
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -15px;
        top: 25px;
        width: 30px;
        height: 30px;
        background: #4CAF50;
        border-radius: 50%;
    }
    .timeline-item::after {
        content: '';
        position: absolute;
        left: 0;
        top: 40px;
        height: calc(100% - 40px);
        width: 2px;
        background: #ddd;
    }
    .timeline-date {
        color: #666;
        font-size: 1.1em;
        font-weight: 600;
        margin-bottom: 10px;
    }
    .timeline-content {
        color: #333;
        font-size: 1em;
        line-height: 1.6;
    }
    .timeline-content ul {
        padding-left: 20px;
        margin: 10px 0;
    }
    .timeline-content li {
        margin-bottom: 8px;
    }
    .developer-sign {
        text-align: center;
        margin-top: 40px;
        color: #888;
        font-style: italic;
    }
</style>

<div class="history-timeline">
    <div class="developer-sign">
        【重要】有任何问题或者Bug欢迎进行反馈，该网站为测试网站，均用于学习用途，不得用于其他用途！<br>
         联系方式：596044192@qq.com<br>
        --------------------------------------开发者：达之领域（0v0）
    </div>

    <!-- 按日期倒序排列 -->
    <!-- <div>数据条数：{{ histories|length }}</div> -->
    {% for history in histories %}
        <div class="timeline-item">
            <div class="timeline-date">{{ history.time }}</div>
            <div class="timeline-content">
                <p>{{ history.history_content|linebreaks }}</p>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}
